<template>
  <div class="condition-box">
    <div
      class="condition-list"
      v-for="(condition, index) in conditionList || []"
      :key="index"
    >
      <div class="condition-item" >
        <span class="label">
          <el-tooltip content="同分组为and，不同分组间为or">
            <span>分组<ac-icon iconId="018dca8ec9890493be26" style="margin-left: 5px"/>：</span>
          </el-tooltip>
        </span>
        <span class="content">
        <el-input v-model="condition.group" size="small" />
        <ac-icon
          v-if="index > 0 && index < (conditionList || []).length"
          iconId="018fa3973ded010d7ef2"
          title="上移"
          style="margin-left: 10px"
          @click="moveItemUp(index, conditionList)"
        />
        <ac-icon
          v-if="index < (conditionList || []).length - 1"
          iconId="018fa397630c01052d7e"
          title="下移"
          style="margin-left: 10px"
          @click="moveItemDown(index, conditionList)"
        />
        <ac-icon
          iconId="018dc9c3efd3a0502886"
          title="删除条件"
          color="red"
          style="margin-left: 10px"
          @click="deleteItem(index, conditionList)"
        />
      </span>
      </div>
      <div class="condition-item">
        <span class="label">条件：</span>
        <span class="content">
          <ac-select
            v-model="condition.condition"
            size="small"
            :options="props.fieldList"
          />
        </span>
      </div>
      <div class="condition-item">
        <span class="label">类型：</span>
        <span class="content">
        <ac-select
          v-model="condition.type"
          size="small"
          options="等于,不等于,包含,不包含,大于,大于等于,小于,小于等于"
        />
      </span>
      </div>
      <div class="condition-item">
        <span class="label">条件值：</span>
        <span class="content">
          <el-input v-model="condition.value" size="small" />
        </span>
      </div>
    </div>
    <div class="condition-add-box">
      <div class="condition-add" @click="addItem(conditionList)">
        <ac-icon iconId="018dca3b4707c4c43a2f" />
        <span style="margin-left: 5px;font-size:13px">添加条件</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount } from 'vue';
import { ElMessageBox } from "element-plus";

const conditionList = defineModel();
const props = defineProps({
  fieldList: String
});

const addItem = (list) => {
  list.push({});
};

const deleteItem = (index, list) => {
  ElMessageBox.confirm("请确认是否删除？", "提示", { type: "warning" }).then(() => {
    list.splice(index, 1);
  }).catch(() => {});
};

const moveItemUp = (index, list) => {
  const curr = list[index];
  list[index] = list[index - 1];
  list[index - 1] = curr;
};

const moveItemDown = (index, list) => {
  const curr = list[index];
  list[index] = list[index + 1];
  list[index + 1] = curr;
};

onBeforeMount(() => {
  if (!conditionList.value) {
    conditionList.value = [];
  }
});
</script>

<style scoped lang="scss">
.condition-box {
  flex-grow: 1;
  overflow: auto;
  .ac-icon {
    flex-shrink: 0;
    cursor: pointer;
  }
  .condition-list {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgb(51, 51, 51);
    &:nth-last-child(2) {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
    }
    .condition-item {
      color: white;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 2px 3px;
      .label {
        font-size: 13px;
        width: 80px;
        color: #dcdcdc;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
      }
      .content {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }
  .condition-add-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 8px;
    color: #dcdcdc;
    height: 30px;
    .condition-add {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>